<template>
  <div class="add_channels_wrap">
    <el-button
      type="primary"
      size="small"
      @click="pop_show = true"
      class="pull-right"
      >新增频道</el-button
    >

    <el-dialog title="新增频道" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="ChannelsForm"
        status-icon
        :rules="rulesChannelsForm"
        ref="ChannelsForm"
        label-width="100px"
      >
        <el-form-item label="频道组：" prop="group_id">
          <el-input 
          type="text" 
          v-model="ChannelsForm.group_name" 
          placeholder="频道组名称"></el-input>
        </el-form-item>

        <el-form-item label="一级分类：" prop="cate_name">
          <el-select v-model="ChannelsForm.cate">
            <el-option 
            v-for="item in category_list"
            :key="item.id"
            :value="item.id"
            :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="频道地址：" prop="group_url">
          <el-input
            type="text"
            v-model="ChannelsForm.url"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item label="展示顺序：" prop="sequence">
          <el-input
            type="text"
            v-model="ChannelsForm.sequence"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ChannelsForm')">重置</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "AddChannels",
  data() {
    return {
      pop_show: false,
      group_type_list: [],

      ChannelsForm: {
        group_name: "",
        cate: "",
        url: "",
        sequence: "",
      },
      rulesChannelsForm: {},
    };
  },
  methods: {
    // 提交的数据
    submitForm() {
      this.axios
      .post(cons.apis + '/v1/goods/groups/',{
        name:this.ChannelsForm.group_name,
        cate:this.ChannelsForm.cate,
        group_url:this.ChannelsForm.url,
        sequence:this.ChannelsForm.sequence
      },{
        headers:{
          Authorization:'JWT ' + localStorage.token,
        },
        responseType:'json',
      })
      .then((res) => {
        console.log('添加频道组的响应',res)
        if (res.status == 201){
          this.$message({
            type:'success',
            message:'频道添加成功'
          })
          this.pop_show = false
          this.$refs['ChannelsForm']
          this.$emit['fnRestTable']
        }else{
          this.$message({
            type:'error',
            message:'频道添加失败'
          })
        }
      }).catch((err) => {
        console.log(err)
      });
    },
    // 加载所有的一级类别
    fnGetCategories() {
      this.axios
        .get(cons.apis + "/v1/goods/firstCates/", {
          headers: {
            Authorization: "JWT " + token,
          },
          responseType: "json",
        })
        .then((res) => {
          console.log("一级类别>>>", res);
          this.category_list = res.data;
        })
        .catch((err) => {
          console.log(err.response);
        });
    },

  },
  // 挂载
  mounted() {
    this.fnGetCategories();
  },
};
</script>
